<template>
  <div class="home-wrap" v-cloak>

    <div class="mescroll" id="homeScroll">

      <!--头部滚动固定-->
      <div class="topNav-wrap"
           v-if="tabData.length"
           v-show="topNavFixedShow" >
        <div class="switcher-wrap" v-if="tabData.length">
          <div v-for="(item,index) in tabData"
               @click="tabDataClick(index,item)"
               :key="index"
               class="si"
               :class="switchFlag == index?'switcher-active':''">
            {{item.txt}}
          </div>
        </div>
      </div>

      <header class="header-wrap" :style="{backgroundImage:headerImg}">
        <div class="header-tip-wrap">
          <div class="title" :class="titleSc">
            当前预警：
          </div>
          <div class="content" v-show="riskCount">
            <ol class="ol-wrap" :class="headerOlAn">
              <li class="iht-c-red">{{riskCount.red}}</li>
              <li class="iht-c-orange">{{riskCount.orange}}</li>
              <li class="iht-c-yellow">{{riskCount.yellow}}</li>
              <li class="iht-c-blue">{{riskCount.blue}}</li>
              <li class="iht-c-gray">{{riskCount.none}}</li>
            </ol>
          </div>
        </div>
      </header>

      <!--导航-->
      <transition name="fadeShow">
        <div class="nav-wrap" v-if="navList.length">
          <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" id="navScroll">
            <div class="mui-scroll">
              <div class="n-o">
                <!--:class="{'with5':navListLen.length > 4}"-->
                <div v-for="(nav,index) in navList"
                     class="n-i"
                     :key="index"
                     @click="navClick(nav)">
              <span :class="[nav.bcColor,nav.numClass]">
                <i class="iconfont" :class="nav.iconClass"></i>
            <div class="iy-nav-tips">
              <em class="iy-nav-num" v-if="nav.num.value">
                {{nav.num.value}}
              </em>
            </div>
          </span>
                  <div class="title">{{nav.name}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>

      <div class="iy-body" v-if="tabChecked != 99">
        <div class="switcher-wrap" v-if="tabData.length">
          <div v-for="(item,index) in tabData"
               @click="tabDataClick(index,item)"
               :key="index"
               class="si"
               :class="switchFlag == index?'switcher-active':''">
            {{item.txt}}
          </div>
        </div>
        <ul class="home-list-ul" v-show="tabChecked.id == 322">
          <li class="home-list-item"
              v-for="(item,index) in homeInfoList"
              :key="index"
              @click="goInfoDetails(item)">
            <div class="title">
              {{item.title}}
            </div>
            <div class="time">
              {{item.createUserInfo.orgName}}
              <div class="rt">
                {{item.happenTime}}
              </div>
            </div>
            <!--<div class="time">-->
              <!--{{item.createTime}}-->
              <!--&lt;!&ndash;<div class="rt">&ndash;&gt;-->
                <!--&lt;!&ndash;{{item.businessTypeName}}&ndash;&gt;-->
              <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--</div>-->
          </li>
        </ul>
        <ul class="home-list-ul" v-show="tabChecked.id == 323">
          <li class="home-list-item"
              v-for="item in homePushList"
              :key="item.messageId"
              @click="goInfoDetails(item)">
            <div class="title">
              {{item.title}}
            </div>
            <div class="time">
              {{item.createUserInfo.orgName}}
              <div class="rt">
                {{item.happenTime}}
                <!--<div class="rt2" :class="item.warnRiskLevelClass">-->
                  <!--{{item.warnRiskLevelName}}-->
                <!--</div>-->
              </div>
            </div>
            <!--<div class="time">-->
              <!--更新时间： {{item.updateTime}}-->
              <!--<div class="rt">-->
                <!--{{item.businessTypeName}}-->
              <!--</div>-->
            <!--</div>-->
          </li>
        </ul>
        <ul class="home-list-ul" v-show="tabChecked.id == 324">
          <li class="home-list-item"
              v-for="item in homeWarnList"
              :key="item.businessId"
              @click="goWarnDetail(item)">
            <div class="title">
              {{item.title}}
            </div>
            <div class="time">
              {{item.createUserInfo.linkdoodName}}
              <div class="rt">
                <div class="rt2" :class="item.warnRiskLevelClass">
                  {{item.riskType.name}}
                </div>
              </div>
            </div>
            <div class="time">
             发生时间： {{item.happenTime}}
              <div class="rt">
                {{item.businessTypeName}}
              </div>
            </div>
          </li>
        </ul>
      </div>

    </div>

    <transition name="slideRight">
      <router-view></router-view>
    </transition>

  </div>
</template>

<script>

  import home from "./home.js"

  export default home

</script>

<style lang="scss">
  @import "home.scss";
</style>
